feat: add tree view component #803
Conversation
…eView component structure with Divider
…nd update TreeView component for keyboard navigation support
…nd getUpdateItemsRefMap, and deprecate CollapsibleList component
…ctor divider styles
…r improved tooltip handling
AbhishekA1509
requested review from
vivek-devtron and
vikramdevtron
as code owners
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
… link interactions
…te and improve click handling
… threat count handling
…date props for better state management
…n-fe-common-lib into feat/tree-view
…common-lib into feat/tree-view
… and related types
… improved scrolling behavior
There was a problem hiding this comment.
Pull Request Overview
Adds a new TreeView component (with types, styles, and node rendering), deprecates the old CollapsibleList, refactors ActionMenu and Tooltip to share a text-truncation hook, and migrates the Security sidebar to use the new tree structure.
- Introduce
TreeViewcomponent and deprecateCollapsibleList. - Extract
TrailingItemand integrate it intoActionMenu. - Update SecurityModal sidebar config to output
TreeViewProps['nodes']with dynamic counters. - Extract
useIsTextTruncatedhook and updateTooltipto consume it.
Reviewed Changes
Copilot reviewed 22 out of 22 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Shared/Components/TreeView/TreeView.component.tsx | Implementation of the new TreeView rendering, keyboard support and controlled/uncontrolled modes |
| src/Shared/Components/ActionMenu/ActionMenuItem.tsx | Refactor to use extracted TrailingItem component |
| src/Shared/Components/Security/SecurityModal/config/Sidebar.ts | Migrate sidebar data generation to output TreeView nodes |
| src/Pages/ResourceBrowser/ResourceBrowser.Types.ts | Remove deprecated isExpanded property from K8SObjectBaseType |
| src/Common/Tooltip/UseIsTextTruncated.ts & Tooltip.tsx | Extract and use text-truncation hook across tooltips |
Comments suppressed due to low confidence (1)
src/Pages/ResourceBrowser/ResourceBrowser.Types.ts:40
- Removing the
isExpandedproperty is a breaking change; ensure dependent code and tests are updated accordingly or provide a migration path.
name: string
| ? getUpdateItemsRefMapProp(node.id) | ||
| : getUpdateItemsRefMap(node.id) | ||
| } | ||
| {...node.dataAttributes} |
There was a problem hiding this comment.
Spreading node.dataAttributes directly may throw if it's undefined; consider using a safe fallback like {...(node.dataAttributes || {})}.
| {...node.dataAttributes} | |
| {...(node.dataAttributes || {})} |
Copilot uses AI. Check for mistakes.
| default: | ||
| return null | ||
| } | ||
| return <TrailingItem {...trailingItem} variant={type} /> |
There was a problem hiding this comment.
The variant prop of TrailingItem expects 'neutral' | 'negative', but type (icon/text/counter/...) is passed here; update to pass a valid variant or remove it.
Copilot uses AI. Check for mistakes.
| // eslint-disable-next-line no-param-reassign | ||
| item.trailingItem = threatCount | ||
| ? { | ||
| type: 'counter', | ||
| config: { | ||
| value: threatCount, | ||
| isSelected: selectedId === item.id, | ||
| }, | ||
| } | ||
| : null | ||
| }) | ||
| } | ||
| }) | ||
|
|
||
| return nodes |
There was a problem hiding this comment.
[nitpick] This mutates the input nodes array in place; consider returning a new array or mapping nodes to avoid side effects.
| // eslint-disable-next-line no-param-reassign | |
| item.trailingItem = threatCount | |
| ? { | |
| type: 'counter', | |
| config: { | |
| value: threatCount, | |
| isSelected: selectedId === item.id, | |
| }, | |
| } | |
| : null | |
| }) | |
| } | |
| }) | |
| return nodes | |
| return { | |
| ...item, | |
| trailingItem: threatCount | |
| ? { | |
| type: 'counter', | |
| config: { | |
| value: threatCount, | |
| isSelected: selectedId === item.id, | |
| }, | |
| } | |
| : null, | |
| } | |
| }) | |
| return { | |
| ...node, | |
| items: updatedItems, | |
| } | |
| } | |
| return node | |
| }) | |
| return updatedNodes |
Copilot uses AI. Check for mistakes.
Description
Adds a new
TreeViewcomponent (with types, styles, and node rendering), deprecates the oldCollapsibleList, refactorsActionMenuandTooltipto share a text-truncation hook, and migrates the Security sidebar to use the new tree structure.TreeViewcomponent and deprecateCollapsibleList.TrailingItemand integrate it intoActionMenu.TreeViewProps['nodes']with dynamic counters.useIsTextTruncatedhook and updateTooltipto consume it.Type of change
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
Checklist